
// 定义函数组件

// 01: 使用普通函数的写法
// 一般函数组件的首字母大写
// function Home() {
//     return (<div>
//         我是首页
//     </div>)
// }

// export default Home

//02: 使用箭头函数创建函数组件
// const Home = () => {
//     return (<div>
//         我是首页
//     </div>)
// }

// export default Home

//03:使用命令行 rfc快捷方式
//在react 17 版本之前, 创建组件必须引入React,17版本之后, 可以不用引入.
import React from 'react';

// 在函数外定义事件函数
// 不建议将事件处理函数写在函数组件外, 如果在事件处理函数中使用hooks, 不可以,因为hooks 函数只能在函数组件内使用

// const handleClickFn = () => {
//     console.log('点击事件');
// }

const Home = (props) => {
    console.log('props', props);
    // 在函数被定义事件执行函数
    const handleClickFn = (e, m) => {
        console.log('点击事件');
        console.log(e, m);
    }
    return (
        <div>
            我是首页--{props.username}
            <button onClick={(e) => handleClickFn(e, 100)}>函数组件中绑定事件</button>
        </div>
    );
}



export default Home;

